feat: add a warning when the package license changes by aisiklar · Pull Request #2188 · npmx-dev/npmx.dev

aisiklar · 2026-03-21T23:23:41Z

🔗 Linked issue

🧭 Context

added info/warning beneath the license info, "changed!" if there is a change in the license with additional tooltip which shows info about the change, similar to "from x to y at version a.b".
Also modified the Turkish language support too.

📚 Description

as mentioned in the issue, sometimes license changes and it is important to notify the potential user of the package. This pull request is done to make sure that if there is a change in the license the user will be able to see it and also will get info about the details of the change (like from x license to y license and at version a.b.c)

The following changes are done to the codebase:
modified the [name].vue file: added a new props to LicenseDisplay component.
new composable, useLicenseChanges is written.
In the LicenseDisplay component, changes were made to use this composable and add new element for displaying info about the changed license.
Additionally, en.json and tr-TR.json and schema.json files are modified, to add i18n infrastructure and add Turkish language support (for other languages, additional changes are required)

before:

after:

… language too.

vercel · 2026-03-21T23:23:46Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Apr 13, 2026 4:02am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Apr 13, 2026 4:02am
npmx-lunaria	Ignored		Apr 13, 2026 4:02am

github-actions · 2026-03-21T23:24:27Z

Lunaria Status Overview

🌕 This pull request will trigger status changes.

Learn more

By default, every PR changing files present in the Lunaria configuration's files property will be considered and trigger status changes accordingly.

You can change this by adding one of the keywords present in the ignoreKeywords property in your Lunaria configuration file in the PR's title (ignoring all files) or by including a tracker directive in the merged commit's description.

Tracked Files

File	Note
i18n/locales/en.json	Source changed, localizations will be marked as outdated.
i18n/locales/tr-TR.json	Localization changed, will be marked as complete. 🔄️

Warnings reference

Icon	Description
🔄️	The source for this localization has been updated since the creation of this pull request, make sure all changes in the source have been applied.

coderabbitai · 2026-03-21T23:25:33Z

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

@coderabbitai resume to resume automatic reviews.
@coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

▶️ Resume reviews
🔍 Trigger review

📝 Walkthrough

Walkthrough

This change introduces a license-change detection and notification system for package versions. A new composable fetches npm registry metadata for a given package, extracts and chronologically sorts all versions, then compares licenses between consecutive versions to identify transitions. When changes are detected, they are displayed via a warning component that renders an amber alert panel with formatted change details. Supporting internationalization strings have been added to the schema and locale files in English and Turkish.

Suggested reviewers

danielroe
trueberryless

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly relates to the changeset, explaining the implementation of license change detection and warning UI.
Linked Issues check	✅ Passed	All primary objectives from issue `#1826` are met: detecting license changes, surfacing visible indicators, and providing contextual details.
Out of Scope Changes check	✅ Passed	All changes are directly aligned with the linked issue; no out-of-scope modifications detected.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

ghostdevv

Could you do the style similar to the package size increase warning that we have? #1673 Let me know if you have any questions or need any help!

coderabbitai

Actionable comments posted: 3

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: f7c1c88e-8b86-4447-9fdb-bfbc10c1ff70

📥 Commits

Reviewing files that changed from the base of the PR and between 4294ada and bfd9550.

📒 Files selected for processing (6)

app/components/LicenseDisplay.vue
app/composables/useLicenseChanges.ts
app/pages/package/[[org]]/[name].vue
i18n/locales/en.json
i18n/locales/tr-TR.json
i18n/schema.json

app/components/LicenseDisplay.vue

app/composables/useLicenseChanges.ts

aisiklar · 2026-03-23T04:03:28Z

Could you do the style similar to the package size increase warning that we have? #1673 Let me know if you have any questions or need any help!

hi @ghostdevv
thanks for your comment. I will check the link you mentioned and also the comments made by coderabbitai and change accordingly. I will return you in case i have additional questions. Thanks.

ghostdevv · 2026-03-23T04:31:05Z

Awesome! I'll mark this as draft for now, and you can mark it as ready when you want me to take another look!

codecov · 2026-03-24T04:25:59Z

Codecov Report

❌ Patch coverage is 28.57143% with 10 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/composables/useLicenseChanges.ts	0.00%	6 Missing and 4 partials ⚠️

📢 Thoughts on this report? Let us know!

…sorting versions to date of release

aisiklar · 2026-03-24T05:08:18Z

Hi @ghostdevv
Can you please check again?
I made the style change and also fixed the other issues pointed by bot.
I did NOT rebase on the current state of main, if you want, i can do it and make a new commit. This is my first PR so please advice if I am missing some other things.
Thanks

coderabbitai

Actionable comments posted: 2

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 274b5e5e-8053-43ca-946d-f111b04b96f3

📥 Commits

Reviewing files that changed from the base of the PR and between bfd9550 and ecbb660.

📒 Files selected for processing (5)

app/components/LicenseDisplay.vue
app/composables/useLicenseChanges.ts
i18n/locales/en.json
i18n/locales/tr-TR.json
i18n/schema.json

✅ Files skipped from review due to trivial changes (2)

i18n/locales/en.json
i18n/schema.json

🚧 Files skipped from review as they are similar to previous changes (2)

i18n/locales/tr-TR.json
app/composables/useLicenseChanges.ts

app/components/LicenseDisplay.vue

ghostdevv · 2026-03-25T18:45:05Z

app/components/LicenseDisplay.vue

      aria-hidden="true"
    />
  </span>
+  <div


Hey, the warning should be here like the package size increase one

ghostdevv · 2026-03-25T18:47:42Z

app/composables/useLicenseChanges.ts

+      let prevLicense: string | undefined = undefined
+
+      // `data.versions` is an object with version keys
+      const versions = Object.values(data.versions) as NpmRegistryVersion[]


I think we should only compare to the last version, there is some logic here that could be reused (you can move it into its own utility file in shared too

npmx.dev/app/composables/useInstallSizeDiff.ts

Lines 19 to 39 in 1dd1be9

function getComparisonVersion(pkg: SlimPackument, resolvedVersion: string): string | null {

const isCurrentPrerelease = prerelease(resolvedVersion) !== null

if (isCurrentPrerelease) {

const latest = pkg['dist-tags']?.latest

if (!latest || latest === resolvedVersion) return null

return latest

}

// Find the previous version in time that was stable

const stableVersions = Object.keys(pkg.time)

.filter(v => v !== 'modified' && v !== 'created' && valid(v) !== null && prerelease(v) === null)

.sort((a, b) => compare(a, b))

const currentIdx = stableVersions.indexOf(resolvedVersion)

// Don't compare the second version against the first as the first

// has no baseline so a large size difference is expected

if (currentIdx <= 1) return null

return stableVersions[currentIdx - 1]!

}

aisiklar · 2026-03-27T15:09:33Z

Hi @ghostdevv thanks for the comments. I am working on them.

server/api/registry/license-change/[...pkg].get.ts

Co-authored-by: James Garbutt <[email protected]>

43081j · 2026-04-10T11:34:41Z

to help just confirm the UX, wording, etc. do you have an example package that changed license?

so we can see how the notice looks since your changes

aisiklar · 2026-04-10T12:06:47Z

to help just confirm the UX, wording, etc. do you have an example package that changed license?

so we can see how the notice looks since your changes

Hi @43081j
Sure, i tested my app with package "faker"
in version 2.1.5 the license changed to MIT from Unknown. Therefore, for the latest version there will be no warning but when you switch to version 2.1.5 it will be there.

edit: i also added the Turkish translation

43081j · 2026-04-10T12:28:58Z

Strange, that's the one I tried since it's what's in your screenshot. But I don't see a notice on the preview for it.

edit: ignore me, its the vercel deployment comment misbehaving

aisiklar · 2026-04-10T12:50:15Z

Strange, that's the one I tried since it's what's in your screenshot. But I don't see a notice on the preview for it.

https://npmx.dev/package/faker/v/2.1.5

This doesn't show a message for me

Hello @43081j
Is there a problem, I see you approved it but seeing this message i am writing this message.
I fetched the current state of the repo and re-tried it. I see the message, as attached.

In case there is a problem please return. thanks

43081j · 2026-04-10T13:20:57Z

yup i did approve it because the code looked good 👍

sorry it is my mistake, somehow i ended up on the live site rather than the preview.

once i can see this in a preview i think the PR is good.

43081j · 2026-04-10T13:25:08Z

ok here:
https://npmxdev-git-fork-aisiklar-feature-1826licensechanges-npmx.vercel.app/package/faker/v/2.1.5

this. this doesn't show the notice.

edit: ok super weird - sometimes it shows.

i18n/locales/en.json

If we compute the license change in the warning component, it is possible the fetch resolves _after_ SSR completes it seems. So this means the result is null and no notice is shown (via SSR). When you later navigate to a version, the client does an actual fetch and the notice is now shown. To fix this, I've moved the license change call to the page which is how all other composables in this page work. The license warning component then just consumes the change data.

43081j · 2026-04-10T13:57:37Z

i've pushed a fix @aisiklar .

basically there was a race condition which meant the notice sometimes wouldn't display. i tried to explain in the commit message (083e17f)

Co-authored-by: James Garbutt <[email protected]>

aisiklar · 2026-04-13T04:09:24Z

i've pushed a fix @aisiklar .

basically there was a race condition which meant the notice sometimes wouldn't display. i tried to explain in the commit message (083e17f)

Hi @43081j
Thanks for reviewing/testing and making changes. I also added/changed the TR translation (which, for some reason i could not find, was erased). Made a new commit based on all the other changes you made and suggested.

Regarding the race condition, my humble thoughts are below:
Frankly, I was aware of this condition at the first stages of my work and i thought that i successfully managed to prevent it happen as in my last tests i did not see it occur (i am not very familiar with nuxt, mostly working with next.js, react and vue).
I was considering to develop the new component (LicenseChangeWarning.vue) such that it creates its own data and then consumes it, even with this risk (which i thought i resolved it), because it seemed "to me" a better solution architecture-wise, (even i saw that for others the data fetch is triggered from name.vue). That is interesting i have not seen it in my tests. Maybe it would be better to just mimic the common behavior (of name.vue and how the other data fetches are handled). Sorry for taking your time on this.
Thanks again

ghostdevv · 2026-04-13T18:46:17Z

server/api/registry/license-change/[...pkg].get.ts

+    getKey: event => {
+      const pkg = getRouterParam(event, 'pkg') ?? ''
+      const query = getQuery(event)
+
+      // 1. remove the /'s from the package name
+      const cleanPkg = pkg.replace(/\/+$/, '').trim()
+
+      // 2. Get the version (default to 'latest' if not provided)
+      const version = query.version || 'latest'
+
+      // 3. Create a unique string including the version
+      // Result: "license-change:v1:lodash:4.17.21"
+      return `license-change:v2:${cleanPkg}:${version}`
+    },


The other getKey fns seem to be less complex, is there a reason for the additions?

e.g.

npmx.dev/server/api/registry/analysis/[...pkg].get.ts

Lines 61 to 64 in 7f1e259

getKey: event => {

const pkg = getRouterParam(event, 'pkg') ?? ''

return `analysis:v2:${pkg.replace(/\/+$/, '').trim()}`

},

Hi @ghostdevv
Checking something, will return you ASAP.

1826-add a warning and info for license changes. Added support for TR…

3a0543f

… language too.

[autofix.ci] apply automated fixes

bfd9550

aisiklar mentioned this pull request Mar 21, 2026

highlight license changes #1826

Open

3 tasks

ghostdevv changed the title ~~1826-add a warning and info for license changes. Added support for TR language too.~~ feat: add a warning when the package license changes Mar 21, 2026

vercel bot deployed to Preview – npmx.dev March 21, 2026 23:27 View deployment

ghostdevv requested changes Mar 21, 2026

View reviewed changes

coderabbitai bot reviewed Mar 21, 2026

View reviewed changes

app/components/LicenseDisplay.vue Outdated Show resolved Hide resolved

app/components/LicenseDisplay.vue Outdated Show resolved Hide resolved

app/composables/useLicenseChanges.ts Outdated Show resolved Hide resolved

ghostdevv marked this pull request as draft March 23, 2026 04:31

aisiklar and others added 2 commits March 24, 2026 04:22

fix:warning style changed and unintended chars erased

fa52bff

[autofix.ci] apply automated fixes

bd4ebe5

vercel bot deployed to Preview – npmx.dev March 24, 2026 04:25 View deployment

aisiklar and others added 2 commits March 24, 2026 05:02

fix:added TR language support for warning text and changed logic for …

9afe21d

…sorting versions to date of release

[autofix.ci] apply automated fixes

ecbb660

vercel bot deployed to Preview – npmx.dev March 24, 2026 05:06 View deployment

aisiklar marked this pull request as ready for review March 24, 2026 07:13

coderabbitai bot reviewed Mar 24, 2026

View reviewed changes

app/components/LicenseDisplay.vue Outdated Show resolved Hide resolved

app/components/LicenseDisplay.vue Outdated Show resolved Hide resolved

fix: removed the vue-118n import and used autoimported

b91aab5

vercel bot deployed to Preview – npmx.dev March 24, 2026 07:52 View deployment

ghostdevv requested changes Mar 25, 2026

View reviewed changes

Merge branch 'main' into feature/1826_license_changes

34b84c5

vercel bot deployed to Preview – docs.npmx.dev March 25, 2026 18:50 View deployment

vercel bot deployed to Preview – npmx.dev March 25, 2026 18:50 View deployment

chore: fmt

c3b5986

ghostdevv requested a review from 43081j April 9, 2026 16:53

vercel bot deployed to Preview – npmx.dev April 9, 2026 16:55 View deployment

43081j reviewed Apr 9, 2026

View reviewed changes

server/api/registry/license-change/[...pkg].get.ts Show resolved Hide resolved

43081j reviewed Apr 9, 2026

View reviewed changes

server/api/registry/license-change/[...pkg].get.ts Outdated Show resolved Hide resolved

Update server/api/registry/license-change/[...pkg].get.ts

e1a28da

Co-authored-by: James Garbutt <[email protected]>

vercel bot deployed to Preview – npmx.dev April 10, 2026 04:38 View deployment

43081j approved these changes Apr 10, 2026

View reviewed changes

43081j reviewed Apr 10, 2026

View reviewed changes

i18n/locales/en.json Outdated Show resolved Hide resolved

43081j reviewed Apr 10, 2026

View reviewed changes

i18n/locales/en.json Outdated Show resolved Hide resolved

43081j requested changes Apr 10, 2026

View reviewed changes

vercel bot deployed to Preview – npmx.dev April 10, 2026 13:59 View deployment

Update i18n/locales/en.json

b397996

Co-authored-by: James Garbutt <[email protected]>

vercel bot deployed to Preview – npmx.dev April 13, 2026 03:39 View deployment

Update i18n/locales/en.json

1cd6227

Co-authored-by: James Garbutt <[email protected]>

vercel bot deployed to Preview – npmx.dev April 13, 2026 03:43 View deployment

TR translation added, with suggested changes on the warning message

4b2d0b9

vercel bot deployed to Preview – npmx.dev April 13, 2026 04:02 View deployment

43081j requested a review from ghostdevv April 13, 2026 08:37

43081j approved these changes Apr 13, 2026

View reviewed changes

ghostdevv requested changes Apr 13, 2026

View reviewed changes

	function getComparisonVersion(pkg: SlimPackument, resolvedVersion: string): string \| null {
	const isCurrentPrerelease = prerelease(resolvedVersion) !== null

	if (isCurrentPrerelease) {
	const latest = pkg['dist-tags']?.latest
	if (!latest \|\| latest === resolvedVersion) return null
	return latest
	}

	// Find the previous version in time that was stable
	const stableVersions = Object.keys(pkg.time)
	.filter(v => v !== 'modified' && v !== 'created' && valid(v) !== null && prerelease(v) === null)
	.sort((a, b) => compare(a, b))

	const currentIdx = stableVersions.indexOf(resolvedVersion)
	// Don't compare the second version against the first as the first
	// has no baseline so a large size difference is expected
	if (currentIdx <= 1) return null

	return stableVersions[currentIdx - 1]!
	}

	getKey: event => {
	const pkg = getRouterParam(event, 'pkg') ?? ''
	return `analysis:v2:${pkg.replace(/\/+$/, '').trim()}`
	},

Uh oh!

Conversation

aisiklar commented Mar 21, 2026

🔗 Linked issue

🧭 Context

📚 Description

Uh oh!

vercel bot commented Mar 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Mar 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Lunaria Status Overview

Tracked Files

Uh oh!

coderabbitai bot commented Mar 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviews paused

Walkthrough

Suggested reviewers

Uh oh!

ghostdevv left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

aisiklar commented Mar 23, 2026

Uh oh!

ghostdevv commented Mar 23, 2026

Uh oh!

codecov bot commented Mar 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

aisiklar commented Mar 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

ghostdevv Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

ghostdevv Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

aisiklar commented Mar 27, 2026

Uh oh!

Uh oh!

Uh oh!

43081j commented Apr 10, 2026

Uh oh!

aisiklar commented Apr 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

43081j commented Apr 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

aisiklar commented Apr 10, 2026

Uh oh!

43081j commented Apr 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

43081j commented Apr 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

43081j commented Apr 10, 2026

Uh oh!

aisiklar commented Apr 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel bot commented Mar 21, 2026 •

edited

Loading

github-actions bot commented Mar 21, 2026 •

edited

Loading

coderabbitai bot commented Mar 21, 2026 •

edited

Loading

ghostdevv left a comment •

edited

Loading

codecov bot commented Mar 24, 2026 •

edited

Loading

aisiklar commented Mar 24, 2026 •

edited

Loading

aisiklar commented Apr 10, 2026 •

edited

Loading

43081j commented Apr 10, 2026 •

edited

Loading

43081j commented Apr 10, 2026 •

edited

Loading

43081j commented Apr 10, 2026 •

edited

Loading

aisiklar commented Apr 13, 2026 •

edited

Loading